<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>addEdu</title>
    <link rel="icon" href="favicon.ico" type="image/x-icon">
    <link href="./css/reset.css" rel="stylesheet">
    <!-- Bootstrap3.3.5 CSS -->
    <link href="/static/css/bootstrap.min.css" rel="stylesheet">
    <link href="/static/css/queryResult.css" rel="stylesheet">
    <link href="/static/css/addEdu.css" rel="stylesheet">
</head>
<body>
<div class="container">
    <div class="queryResule">
        <div class="back">
            <a href="/index">返回首页</a>
        </div>
        <h2>举报侵权系统</h2>

        <form action="/addEdu" method="post" name="addForm">
          <div class="top">
              <div class="left">
                  <p>
                      <span>歌曲名称：</span>
                      <span>
                        <input type="text" name="name" class="input_text" tabindex="1" onfocus="if(this.placeholder=='歌曲名称'){this.placeholder='';}this.className ='input_text input_text_focus'" onblur="if(this.value==''){this.placeholder='歌曲名称';this.className ='input_text'}" accesskey="n" type="text" placeholder="歌曲名称" size="25" autocomplete="off">
                      </span>
                  </p>
                  <p>
                      <span>作者：</span>
                      <span>
                        <input type="text" name="place" class="input_text" tabindex="1" onfocus="if(this.placeholder=='作者'){this.placeholder='';}this.className ='input_text input_text_focus'" onblur="if(this.value==''){this.placeholder='作者';this.className ='input_text'}" accesskey="n" type="text" placeholder="作者" size="25" autocomplete="off">
                      </span>
                  </p>
                  <p>
                      <span>作曲人：</span>
                      <span>
                        <input type="text" name="nation" class="input_text" tabindex="1" onfocus="if(this.placeholder=='作曲人'){this.placeholder='';}this.className ='input_text input_text_focus'" onblur="if(this.value==''){this.placeholder='作曲人';this.className ='input_text'}" accesskey="n" type="text" placeholder="作曲人" size="25" autocomplete="off">
                      </span>
                  </p>
                 
				  
                  <p>
                      <span>索赔额：</span>
                      <span>
                        <input type="text" name="mode" class="input_text" tabindex="1" onfocus="if(this.placeholder==''){this.placeholder='';}this.className ='input_text input_text_focus'" onblur="if(this.value==''){this.placeholder='';this.className ='input_text'}" accesskey="n" type="text" placeholder="" size="25" autocomplete="off" placeholder="">
                      </span>
                  </p>
                  <p>
                      <span>侵权描述：</span>
                      <span>
                        <input type="text" name="length" class="input_text" tabindex="1" onfocus="if(this.placeholder==''){this.placeholder='';}this.className ='input_text input_text_focus'" onblur="if(this.value==''){this.placeholder='';this.className ='input_text'}" accesskey="n" type="text" placeholder="" size="25" autocomplete="off">
                      </span>
                  </p>
                  <p>
                      <span>演唱者：</span>
                      <span>
                        <input type="text" name="certNo" class="input_text" tabindex="1" onfocus="if(this.placeholder==''){this.placeholder='';}this.className ='input_text input_text_focus'" onblur="if(this.value==''){this.placeholder='';this.className ='input_text'}" accesskey="n" type="text" placeholder="" size="25" autocomplete="off">
                      </span>
                  </p>

              </div>
              <div class="headImg">
                  <div class="uploadImg">
                      <input type="file" name="" value="上传照片" id="file">
                      +
                      <!-- <img src="./images/head.jpg" alt=""> -->
                      {{/*                          <img src="" alt="">*/}}
                  </div>
                  <p>请上传照片(120*160px)</p>
              </div>

          </div>
          <input type="hidden" name="photo" id="photo" value=""/>
          <button type="button" name="button" class="btn">添加侵权信息</button>
        </form>
    </div>
    <!-- data-backdrop="false"去除遮罩层  -->
    <div class="modal fade bd-example-modal-sm"  id="myModal" role="dialog" data-backdrop="false"  aria-hidden="true">
        <div class="modal-dialog modal-sm">
            <div class="modal-content">
                <p class="text-center mb-0" style="height:42px;line-height:42px;margin:0;">
                    <i class="fa fa-check-circle text-success mr-1" aria-hidden="true"></i>
                    请输入侵权所必需的相关信息
                </p>
            </div>
        </div>
    </div>

</div>
</body>
<script type="text/javascript" src="/static/js/jquery.min.js"></script>
<script type="text/javascript" src="/static/js/bootstrap.min.js"></script>
<script type="text/javascript">
    $(function() {
        // 上传图片
        $('#file').unbind('change').bind('change',function() {
            event.stopPropagation();
            uploadFile('img');
            return;
        });
        // 头像图片
        var artImg;
        function uploadFile(type) {
            event.stopPropagation();
            let formData = new FormData();
            if( type == "img"){
                formData.append('file', $('#file')[0].files[0]);
            }
            $.ajax({
                url: '/upload',
                type: 'POST',
                cache: false,
                data: formData,
                processData: false,
                dataType: "json",
                contentType: false
            }).done(function (res) {
                if (res.error == "0") {
                    if( type == "img"){
                        $('.uploadImg img').attr('src',res.result.path);
                        $('#photo').val(res.result.path)
                        return artImg = res.result.path;
                    }
                } else {
                    alert("上传失败！" + res.result.msg)
                }
            }).fail(function (res) { });
        }

        var inputs = $('input[type="text"]');
        // 提交按钮
        $('.btn').click(function() {
            // 如果为空 报错提示
            for (var i = 0; i < inputs.length; i++) {
                if (!($(inputs[i]).val())) {
                    $(inputs[i]).addClass('redColor');
                    $('#myModal').modal('show');
                    setTimeout(function(){
                        $("#myModal").modal("hide");
                    },2000);
                    return;
                }
            }

            // 成功后提交数据
            // $(location).attr('href','index.html');
            $("form[name='addForm']").submit()
        })
    })
</script>
</html>
